<template>
  <div>
    <page-header-wrapper />
    <a-card
      :loading="loading"
      :title="$t('menu.site.content.form_model_content_list')"
      style="margin-top: 10px"
    >
      <a slot="extra" @click="jump_to">新增表单内容</a>
      <a-input-search v-model="searchForm.keyword" @search="search" style="width: 240px; margin: 10px" />
      <a-table
        :pagination="pagination"
        :columns="columns"
        :data-source="data"
        :rowKey="record=>record.id"
      >
        <template
          slot="form_id"
        >
          <div>
            {{ searchForm.form_id }}
          </div>
        </template>
        <template
          slot="form_title_field"
          slot-scope="text, record"
        >
          <div>
            {{ record[form_title] }}
          </div>
        </template>
        <template
          slot="update_time"
          slot-scope="text"
        >
          <div>
            {{ new Date(parseInt(text + "000")).toDateString() }}
          </div>
        </template>
        <template slot="operation" slot-scope="text, record">
          <a @click="jump_to(record)" style="float: left; margin-right: 10px;">编辑表单内容</a>
          <div class="editable-row-operations">
            <a-popconfirm :title="$t('form.basic-form.confirm.delete')" @confirm="() => _delFormContent(record)">
              <a>删除</a>
            </a-popconfirm>
          </div>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>

import {
  searchFormInfo,
  delFormContent
} from '@/api/form'
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'

const columns = [
  {
    title: 'form_id',
    dataIndex: 'form_id',
    width: '5%',
    scopedSlots: { customRender: 'form_id' }
  },
  {
    title: 'form_title_field',
    dataIndex: 'form_title_field',
    width: '15%',
    scopedSlots: { customRender: 'form_title_field' }
  },
  {
    title: 'Foreign key',
    dataIndex: 'uuid',
    width: '15%',
    scopedSlots: { customRender: 'uuid' }
  },
  {
    title: 'Bind Foreign key',
    dataIndex: 'foreign_uuid',
    width: '15%',
    scopedSlots: { customRender: 'foreign_uuid' }
  },
  {
    title: 'update_time',
    dataIndex: 'update_time',
    width: '15%',
    scopedSlots: { customRender: 'update_time' }
  },
  {
    title: 'operation',
    dataIndex: 'operation',
    width: '15%',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  data () {
    return {
      searchForm: {
        page: 1,
        keyword: '',
        order: 'update_time@desc',
        form_id: ''
      },
      columns,
      data: [],
      form_title: '',
      loading: true,
      pagination: {
        total: 0,
        onChange: (page) => {
          this.searchForm.page = page
          this._searchFormInfo()
        }
      }
    }
  },
  components: {
    PageHeaderWrapper
  },
  mounted () {
    this.searchForm.form_id = this.$route.params.form_id
    this.form_title = this.$route.params.form_title
    this._searchFormInfo()
  },
  methods: {
    search () {
      this.searchForm.page = 1
      this._searchFormInfo()
    },
    _searchFormInfo () {
      this.loading = true
      searchFormInfo(this.searchForm).then(res => {
        this.data = res.items
        this.pagination.total = res.count ? res.count : 0
        this.loading = false
      })
    },
    jump_to (items = {}) {
      this.$router.push(`/site/content/info_content/${this.searchForm.form_id}/${items.id}`)
    },
    _delFormContent (item) {
      item.form_id = this.searchForm.form_id
      delFormContent(item).then(res => {
        this._searchFormInfo()
      })
    }
  }
}
</script>

<style scoped></style>
